<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
</head>
<body>
    <!-- 需丰富数据库的列表，才能完善商品详情 计划在学完DOM后完善，希望能避免拼接 -->
    <div class="laptop_list" id="laptop_list">
    </div>
    <!-- 按照id查询，通过laptop_index获取lid=?,接口使用/a1/laptops/list2接口查询数据并加载到页面中 -->
    <script>
         var xhr=new XMLHttpRequest();
         var obj=new URLSearchParams(location.search);
         var _lid=obj.get('lid')
         console.log(_lid);
            xhr.onreadystatechange=function(){
                if(xhr.readyState===4&&xhr.status===200){
                    var _laptop_list=document.getElementById('laptop_list');
                    var obj=JSON.parse(xhr.responseText);
                    var html='';
                    for(var i =0;i<obj.data.length;i++){
                        html+=`
                        <div>
                            <div>${obj.data[i].title}</div>
                            <div>${obj.data[i].subtitle}</div>
                            <div>${obj.data[i].price}</div>
                            <a href="laptop_shopping_cart.html?lid=${obj.data[i].lid}">加入购物车</a>
                        </div>
                        `
                    }
                    _laptop_list.innerHTML=html;
                }
            }
            var url=`/a1/laptops/sui2/?lid=${_lid}`
            xhr.open('GET',url,true);
            xhr.send();
    </script>
</body>
</html>